<template>
  <div class="searchhistory_main">
    <header class="searchhistory_main_title">{{ title }}</header>
    <p class="searchhistory_main_list" v-if="searchHistory.length > 0">
      <router-link
        :to="{ name: 'SEARCHRESULT', params: { key: item } }"
        v-for="(item, index) in searchHistory"
        :key="'searchHistory_' + index"
        >{{ item }}</router-link
      >
    </p>
    <p class="searchhistory_main_list" v-else>
      <span class="nodata">{{ $t("lang.暂无") }}</span>
    </p>
  </div>
</template>
<script>
export default {
  name: "SearchHistoryMain",
  props: {
    searchHistory: {
      type: Array,
      default() {
        return [];
      },
    },
    title: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.searchhistory_main {
  text-align: left;
  padding: 5 / @base;
  .searchhistory_main_title {
    margin: 10 / @base;
  }
  p {
    &.searchhistory_main_list {
      margin: 10 / @base 5 / @base;
      a {
        text-align: center;
        background-color: #fff;
        margin: 2.5 / @base 5 / @base;
        line-height: 24 / @base;
        border: 1 / @base solid #999;
        padding: 0 5 / @base;
        border-radius: 5 / @base;
        display: inline-block;
      }
      span {
        &.nodata {
          margin: 10 / @base 5 / @base;
          display: block;
        }
      }
    }
  }
}
</style>
